<!--
 * @Author: yumao 123456
 * @Date: 2023-05-31 10:09:54
 * @LastEditors: yumao 123456
 * @LastEditTime: 2024-01-12 15:48:13
 * @FilePath: \zyDataScreen\src\views\sjdp\components\ZyScreenLeft.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="leftBox" @click="gopath">
        <!-- <div class="Ltap">
            <img src="@/assets/exportScreen/Ltap.png" alt="" />
        </div> -->
        <div class="chart-box L1_box">
            <p class="chart-box-title">完成情况</p>
            <ul class="L1top">
                <li class="L1topItem">
                    <p class="chartTbiao">预算完成(万美元)</p>
                    <div class="chartIobox1">
                        <div
                            id="leftChart1"
                            style="width: 100%; height: 40px"
                        ></div>
                        <p class="chart1SM" v-if="sunNum">
                            预算目标 <br />
                            {{ sunNum }}
                        </p>
                    </div>
                </li>
                <li class="L1topItemdis">
                    <el-button-group>
                        <el-button
                            type="primary"
                            size="mini"
                            class="buttonDiv"
                            @click.stop="changeData('全部')"
                        >
                            全部
                        </el-button>
                        <el-button
                            type="primary"
                            size="mini"
                            class="buttonDiv"
                            @click.stop="changeData('进口')"
                            >进口</el-button
                        >
                        <el-button
                            type="primary"
                            size="mini"
                            class="buttonDiv"
                            @click.stop="changeData('出口')"
                            >出口</el-button
                        >
                    </el-button-group>
                </li>
            </ul>
            <p class="chartTbiao">本年度月度同比(单位：万美元)</p>
            <div class="chartIobox2">
                <div id="leftChart2" style="width: 100%; height: 120px"></div>
            </div>
            <p class="chartTbiao">完成情况(单位：万美元)</p>
            <div class="chartIobox3">
                <div id="leftChart3" style="width: 100%; height: 140px"></div>
            </div>
        </div>
        <div class="chart-box L2_box">
            <p class="chart-box-title">按贸易方式分布</p>
            <p class="chartTbiao">按贸易组织分布(单位：万美元)</p>
            <div class="chartIobox4">
                <div id="leftChart4" style="width: 100%; height: 100%"></div>
            </div>
        </div>
    </div>
</template>

<script>
import { screenLeftData } from '@/api/export.js'
export default {
    props: {},
    data() {
        return {
            leftChart1: null, //图表对象
            leftChart2: null, //图表对象
            leftChart2data: {},
            leftChart3: null, //图表对象
            leftChart4: null,
            sunNum: 0 //出口预算
        }
    },
    computed: {},
    created() {},
    mounted() {
        this.$nextTick(() => {
            this.leftChartgetall()
        })
    },
    watch: {},
    methods: {
        leftChartgetall(data) {
            let istype = ''
            if (!data || data == '全部') {
                istype = ''
            } else {
                istype = data
            }
            screenLeftData({ type: istype }).then((res) => {
                this.sunNum = JSON.parse(res.data.ExportBudget.value2) / 10000
                // 图标1
                let drawleftChart1Val1 = 0
                let drawleftChart1Val2 = 0
                if (
                    res.data.ExportBudget.value1 > res.data.ExportBudget.value2
                ) {
                    drawleftChart1Val1 = res.data.ExportBudget.value1
                    drawleftChart1Val2 = res.data.ExportBudget.value1
                } else {
                    drawleftChart1Val1 = res.data.ExportBudget.value1
                    drawleftChart1Val2 = res.data.ExportBudget.value2
                }
                this.drawleftChart1(drawleftChart1Val1, drawleftChart1Val2)
                // 图标2
                this.leftChart2data = res.data.ExportYearOnYear.line
                this.drawleftChart2()
                // 图标3

                let xAxisdata3 = res.data.ExportFinish.line.xAxis.map(
                    (item) => {
                        return item
                    }
                )
                let seriesdata3 = res.data.ExportFinish.line.series.map(
                    (item) => {
                        let obj = {
                            name: item.name,
                            type: 'bar',
                            barWidth: 11,
                            barGap: '0%',
                            emphasis: {
                                focus: 'series'
                            },
                            data: item.data
                        }
                        return obj
                    }
                )
                this.drawleftChart3(xAxisdata3, seriesdata3)
                // 图标4
                let xAxisdata4 = res.data.TradeOrganization.line.xAxis.map(
                    (item) => {
                        return item
                    }
                )
                let seriesdata4 = res.data.TradeOrganization.line.series.map(
                    (item) => {
                        let obj = {
                            name: item.name,
                            type: 'bar',
                            barWidth: 11,
                            barGap: '0%',
                            emphasis: {
                                focus: 'series'
                            },
                            data: item.data
                        }
                        return obj
                    }
                )
                this.drawleftChart4(xAxisdata4, seriesdata4)
            })
        },
        drawleftChart1(value1, value2) {
            this.leftChart1 = this.$echarts.init(
                document.getElementById('leftChart1')
            )
            let option = {
                color: ['#EB6287', '#025EAF', '#6DCDA3', '#f48888', '#96979b'],

                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },

                grid: {
                    left: '-3%',
                    right: '20%',
                    top: '0%',
                    bottom: '0%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    show: false,
                    max: JSON.parse(value2)
                },
                yAxis: {
                    type: 'category',
                    show: false
                },
                series: [
                    {
                        name: '1',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true, //开启显示
                            position: 'inside', //柱形上方
                            color: '#fff',
                            fontSize: 14,
                            formatter: () => {
                                if (this.sunNum) {
                                    let v1 = JSON.parse(value1)
                                    let v2 = JSON.parse(value2)
                                    let abs = (v1 / v2) * 100
                                    return abs.toFixed(2) + '%'
                                } else {
                                    return '暂无当年预算数据'
                                }
                            }
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        barWidth: '100%',
                        itemStyle: {
                            barBorderRadius: [3, 0, 0, 3]
                        },
                        data: [JSON.parse(value1)]
                    },
                    {
                        name: '2',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: false, //开启显示
                            position: 'inside', //柱形上方
                            color: '#fff',
                            formatter: '{a}:{c}'
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        barWidth: '100%',
                        itemStyle: {
                            barBorderRadius: [0, 3, 3, 0]
                        },
                        data: [JSON.parse(value2) - JSON.parse(value1)]
                    }
                ]
            }
            this.leftChart1.setOption(option)
        },
        drawleftChart2() {
            this.leftChart2 = this.$echarts.init(
                document.getElementById('leftChart2')
            )
            let option = {
                color: ['#91cc75', '#1672FD'],
                tooltip: {
                    trigger: 'axis'
                },

                toolbox: {
                    show: true
                },
                legend: {
                    top: '10',
                    right: '2%',
                    // x: '50%',
                    textStyle: {
                        fontSize: 14,
                        color: '#B4B4B4'
                    },
                    show: true
                },
                grid: {
                    left: '0%',
                    right: '2%',
                    bottom: '0%',
                    top: '8%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false, //是否从0刻度开始绘制
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#618AB8'
                        }
                    },
                    axisLabel: {
                        // interval: 1, //横轴信息全部显示
                        // rotate: 40, //-30度角倾斜显示
                        color: '#618AB8', //坐标的字体颜色
                        fontSize: 14
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    data: this.leftChart2data.xAxis.map((item) => {
                        return item + '月'
                    })
                },
                yAxis: {
                    type: 'value',
                    // name: '单位（万元）',
                    // scale: true,
                    boundaryGap: true,
                    nameTextStyle: {
                        color: '#618AB8',
                        nameLocation: 'start'
                    },
                    axisLabel: {
                        color: '#618AB8', //坐标的字体颜色
                        fontSize: 14,
                        formatter: function (value, index) {
                            if (value === 0) {
                                return '0'
                            } else {
                                return value
                            }
                        }
                    },
                    splitLine: {
                        show: false,
                        //  改变轴线颜色
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: ['rgba(0,114,255,0.2)']
                        }
                    }
                },
                series: [
                    {
                        name: this.leftChart2data.series[0].name,
                        type: 'line',
                        smooth: false,
                        itemStyle: {
                            color: '#91cc75',
                            lineStyle: {
                                color: '#91cc75',
                                width: '1'
                            }
                        },
                        // areaStyle: {
                        //     color: new this.$echarts.graphic.LinearGradient(
                        //         0,
                        //         0,
                        //         0,
                        //         1,
                        //         [
                        //             {
                        //                 offset: 0,
                        //                 color: 'rgba(0, 255, 234, 0.8)'
                        //             },
                        //             {
                        //                 offset: 1,
                        //                 color: '#02133E'
                        //             }
                        //         ]
                        //     )
                        // },
                        data: this.leftChart2data.series[0].data
                    },
                    {
                        name: this.leftChart2data.series[1].name,
                        type: 'line',
                        smooth: false,
                        itemStyle: {
                            color: '#1672FD',
                            lineStyle: {
                                color: '#1672FD',
                                width: '1'
                            }
                        },
                        // areaStyle: {
                        //     color: new this.$echarts.graphic.LinearGradient(
                        //         0,
                        //         0,
                        //         0,
                        //         1,
                        //         [
                        //             {
                        //                 offset: 0,
                        //                 color: 'rgba(0, 255, 234, 0.8)'
                        //             },
                        //             {
                        //                 offset: 1,
                        //                 color: '#1672FD'
                        //             }
                        //         ]
                        //     )
                        // },
                        data: this.leftChart2data.series[1].data
                    }
                ]
            }
            this.leftChart2.setOption(option)
        },
        drawleftChart3(xAxisdata, seriesdata) {
            this.leftChart3 = this.$echarts.init(
                document.getElementById('leftChart3')
            )
            let option = {
                color: ['#FDA86A', '#1672FD'],

                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    top: '10',
                    right: '2%',
                    // x: '50%',
                    textStyle: {
                        fontSize: 14,
                        color: '#B4B4B4'
                    },
                    show: true
                },
                grid: {
                    left: '0%',
                    right: '0%',
                    bottom: '0%',
                    top: '5%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        // boundaryGap: false,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#35527C'
                            }
                        },
                        axisLabel: {
                            interval: 0, //横轴信息全部显示
                            rotate: 30, //-30度角倾斜显示
                            color: '#8697BA', //坐标的字体颜色
                            fontSize: 12
                        },
                        axisTick: {
                            show: false
                        },
                        // splitLine: {
                        //     show: true,
                        //     //  改变轴线颜色
                        //     lineStyle: {
                        //         // 使用深浅的间隔色
                        //         color: ['#35527C']
                        //     }
                        // },
                        data: xAxisdata
                    }
                ],
                yAxis: [
                    {
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#35527C'
                            }
                        },
                        type: 'value',

                        axisLabel: {
                            color: '#8697BA', //坐标的字体颜色
                            fontSize: 12
                        },
                        splitLine: {
                            show: false,
                            //  改变轴线颜色
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: ['#35527C']
                            }
                        }
                    }
                ],
                series: seriesdata
            }
            this.leftChart3.setOption(option)
        },

        drawleftChart4(xAxisdata, seriesdata) {
            this.leftChart4 = this.$echarts.init(
                document.getElementById('leftChart4')
            )
            let option = {
                color: ['#E9CF65', '#037BD8'],

                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    top: '0',
                    right: '2%',
                    // x: '50%',
                    textStyle: {
                        fontSize: 14,
                        color: '#B4B4B4'
                    },
                    show: true
                },
                grid: {
                    left: '0%',
                    right: '0%',
                    bottom: '0%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        // boundaryGap: false,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#35527C'
                            }
                        },
                        axisLabel: {
                            interval: 0, //横轴信息全部显示
                            // rotate: 40, //-30度角倾斜显示
                            color: '#8697BA', //坐标的字体颜色
                            fontSize: 12
                        },
                        axisTick: {
                            show: false
                        },
                        // splitLine: {
                        //     show: true,
                        //     //  改变轴线颜色
                        //     lineStyle: {
                        //         // 使用深浅的间隔色
                        //         color: ['#35527C']
                        //     }
                        // },
                        data: xAxisdata
                    }
                ],
                yAxis: [
                    {
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#35527C'
                            }
                        },
                        type: 'value',

                        axisLabel: {
                            color: '#8697BA', //坐标的字体颜色
                            fontSize: 12
                        },
                        splitLine: {
                            show: false,
                            //  改变轴线颜色
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: ['#35527C']
                            }
                        }
                    }
                ],
                series: seriesdata
            }
            this.leftChart4.setOption(option)
        },
        // 转换单位
        numberFormat(value) {
            let param = {}
            let k = 10000
            let sizes = ['', '万', '亿', '万亿']
            let i = 0
            if (value < k) {
                param.value = value
                param.unit = ''
            } else {
                i = Math.floor(Math.log(value) / Math.log(k))
                param.value = (value / Math.pow(k, i)).toFixed(2)
                param.unit = sizes[i]
            }
            return param
        },
        // 转换单位
        keepTwoDecimalFull(num) {
            if (num > 10000) {
                let result = num / 10000
                result = Math.floor(result * 100) / 100
                var s_x = result.toString() //将数字转换为字符串
                var pos_decimal = s_x.indexOf('.') //小数点的索引值// 当整数时，pos_decimal=-1 自动补0
                if (pos_decimal < 0) {
                    pos_decimal = s_x.length
                    s_x += '.'
                } // 当数字的长度< 小数点索引+2时，补0
                while (s_x.length <= pos_decimal + 2) {
                    s_x += '0'
                }
                s_x += '万'
            } else {
                s_x = num
            }
            return s_x
        },
        // 切换数据
        changeData(data) {
            this.$emit('allChangeData', data)
        },
        // 主屏
        gopath() {
            this.$router.push({
                path: '/'
            })
        }
    },
    components: {}
}
</script>

<style lang="scss" scoped>
.leftBox {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    padding-left: 47px;
    cursor: pointer;
    .Ltap {
        position: absolute;
        left: 2px;
        top: 0;
        width: 32px;
        height: 660px;
        img {
            width: 100%;
            height: 100%;
        }
    }
    &:hover {
        .Ltap {
            -webkit-animation-name: scaleDraw; /*关键帧名称*/
            -webkit-animation-timing-function: ease; /*动画的速度曲线*/
            // -webkit-animation-iteration-count: infinite; /*动画播放的次数*/
            -webkit-animation-iteration-count: infinite; /*动画播放的次数*/
            -webkit-animation-duration: 1.5s; /*动画所花费的时间*/
        }
    }
    .chart-box {
        width: 100%;
        background-size: cover;
        height: 100%;
        position: relative;
        overflow: hidden;
        &-title {
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 21px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #01e9ff;
            text-align: center;
            position: absolute;
            left: 0;
            top: 0;
        }
        .L1top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .L1topItem {
                width: 70%;
            }
            .L1topItemdis {
                // width: 30%;
            }
        }
    }
    .chartTbiao {
        font-size: 14px;
        font-family: MicrosoftYaHei;
        background-image: -webkit-linear-gradient(
            bottom,
            #2bb3ff 0%,
            #38e7ee 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 600;
        font-style: italic;
    }
    .complate {
        width: 428px;
        height: 38px;
        background: #000a3b;
        border: 2px solid #376dca;
        color: #fff;
        font-size: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 6px;
        letter-spacing: 1px;
        .num {
            font-family: 'Yourname';
            color: #ffb33a;
            font-size: 23px;
            margin-left: 3px;
        }
        .smft {
            font-size: 13px;
            margin-left: 3px;
        }
        img {
            width: 22px;
            height: 27px;
            margin-top: -3px;
        }
    }
    .chartIobox1 {
        width: 100%;
        margin-top: 10px;
        position: relative;
        .chart1SM {
            position: absolute;
            right: 0px;
            top: -9px;
            color: #fff;
            font-size: 14px;
        }
    }
    .chartIobox3 {
        width: 100%;

        margin-top: 10px;
    }
    .chartIobox4 {
        width: 100%;
        height: 130px;
        margin-bottom: 8px;
    }
    .L1_box {
        height: 417px;
        box-sizing: border-box;
        padding: 43px 10px 10px 36px;
        background-image: url('../../../assets/exportScreen/L1.png');
    }
    .L2_box {
        height: 193px;
        background-image: url('../../../assets/exportScreen/L2.png');
        box-sizing: border-box;
        padding: 40px 10px 10px 36px;
        margin-top: 30px;
    }
    @keyframes scaleDraw {
        /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
        0% {
            transform: scale(1); /*开始为原始大小*/
        }
        50% {
            transform: scale(1.2); /*放大1.1倍*/
        }
    }
    /deep/ .el-button--mini {
        padding: 4px 8px;
    }
    .buttonDiv {
        background: #0090fc;
    }
    .buttonDiv:focus:not(.buttonDiv:hover) {
        background: #e9cf65;
    }
}
</style>